<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择"
    width="1200px"
    :top="'3vh'"
    :fullscreen="fullscreen"
    :before-close="handleBeforeClose"
  >
    <template #header>
      <div class="dialog-header-flex" @dblclick="toggleFullscreen">
        <span>选择 - {{ type }}</span>
      </div>
    </template>
    <component
      :is="currentSelector"
      :multiple="multiple"
      :selectedList="debugSelectedList"
      :original-personnel="originalPersonnel"
      :limited-mode="limitedMode"
      @update:selectedList="handleSelectedListUpdate"
    />
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import RoleSelector from './RoleSelector.vue'
import UserSelector from './UserSelector.vue'
import DeptSelector from './DeptSelector.vue'
import PostSelector from './PostSelector.vue'

// 引入统一的夜间模式样式
import '../Workflow/styles/dark-theme.css'

const props = defineProps({
  type: { type: String, required: true },
  visible: { type: Boolean, default: false },
  multiple: { type: Boolean, default: true },
  selectedList: { type: Array, default: () => [] },
  // 原始人员配置（用于限制模式）
  originalPersonnel: { type: Array, default: () => [] },
  // 是否限制模式
  limitedMode: { type: Boolean, default: false }
})
const emit = defineEmits(['update:selectedList', 'close', 'update:visible'])

const dialogVisible = ref(props.visible)
watch(() => props.visible, val => {
  console.log('SelectorModal - visible changed:', val)
  console.log('SelectorModal - selectedList:', selectedList.value)
  console.log('SelectorModal - props.selectedList:', props.selectedList)
  dialogVisible.value = val
  
  // 当弹窗打开时，确保数据正确传递
  if (val) {
    console.log('SelectorModal - Modal opening, syncing selectedList')
    // 直接同步数据，不使用 nextTick
    selectedList.value = Array.isArray(props.selectedList) ? JSON.parse(JSON.stringify(props.selectedList)) : []
    console.log('SelectorModal - selectedList synced:', selectedList.value)
  }
})
watch(dialogVisible, val => {
  console.log('SelectorModal - dialogVisible changed:', val)
  emit('update:visible', val)
})

const selectedList = ref([])

watch(() => props.selectedList, (val) => {
  console.log('SelectorModal - selectedList changed:', val)
  // 确保深拷贝，避免引用问题
  selectedList.value = Array.isArray(val) ? JSON.parse(JSON.stringify(val)) : []
}, { immediate: true, deep: true })

const selectorMap = {
  role: RoleSelector,
  user: UserSelector,
  dept: DeptSelector,
  post: PostSelector,
}
const currentSelector = computed(() => {
  console.log('SelectorModal - currentSelector computed:', props.type, selectorMap[props.type])
  return selectorMap[props.type] || RoleSelector
})

// 添加调试日志，查看传递给子组件的selectedList
const debugSelectedList = computed(() => {
  console.log('SelectorModal - debugSelectedList:', selectedList.value)
  return selectedList.value
})

const fullscreen = ref(false)
function toggleFullscreen() {
  fullscreen.value = !fullscreen.value
}

function handleBeforeClose(done) {
  console.log('SelectorModal - beforeClose called')
  done()
}

function handleSelectedListUpdate(list) {
  console.log('SelectorModal - handleSelectedListUpdate:', list)
  selectedList.value = list
}

function onConfirm() {
  console.log('SelectorModal - onConfirm called')
  // 使用nextTick确保数据更新完成后再触发事件
  nextTick(() => {
    emit('update:selectedList', selectedList.value)
    emit('close')
    dialogVisible.value = false
  })
}
</script>
<style scoped>
.dialog-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.dialog-header-actions {
  display: flex;
  align-items: center;
}
.fullscreen-btn {
  font-size: 18px;
  color: #909399;
  cursor: pointer;
  background: none;
  border: none;
  margin-right: 0;
}
</style>
<!--
SelectorModal.vue
统一入口，根据type渲染具体选择弹窗组件。
props:
  - type: 选择类型（role/user/dept/post）
  - visible: 是否显示
  - multiple: 是否多选
  - selectedList: 已选项
emits:
  - update:selectedList
  - close
-->
